<template>
  <n-space vertical :size="2">
    <n-button v-if="!isSaaS" tag="span" size="small" text type="primary" :style="style" @click="handleStoreDetail">
      <div class="ellipsis">{{ row.storeName || '-' }}</div>
    </n-button>
    <n-button tag="span" size="small" text type="primary" :style="style" @click="handleStoreDetail">
      店铺ID：{{ row.storeId }}
    </n-button>
    <n-text v-if="row.providerType" :type="row.providerType === 1 ? 'success' : 'error'" :style="style">
      {{ findDic(row.providerType, 'PROVIDER_TYPE') }}
    </n-text>
    <n-text v-if="isHQSC" type="primary">{{ row.companyName }}</n-text>
  </n-space>
</template>

<script setup lang="ts">
  import { NSpace, NButton, NText } from 'naive-ui'
  import { useRouter } from 'vue-router'
  import { encryptJSEncrypt } from '@/utils'
  import { useDictionary } from '@/hooks'
  import { isHQSC, isSaaS } from '@/utils/is'
  import { computed } from 'vue'

  const props = defineProps({
    row: {
      type: Object,
      default: () => ({})
    },
    size: {
      type: String,
      default: 'medium'
    }
  })

  const router = useRouter()
  const { find: findDic } = useDictionary()

  const style = computed(() => {
    return {
      fontSize: props.size === 'small' ? '12px' : '14px'
    }
  })

  function handleStoreDetail() {
    const storeUuid = encryptJSEncrypt(props.row.storeId) || ''
    router.push({
      name: 'ShopManageDetail',
      query: {
        storeUuid
      }
    })
  }
</script>

<style scoped lang="scss"></style>
